<html>
<script src="./vue.js"></script>
<script>
    onload = function () {
        var app = new Vue({
            el: '.container',
            data() {
                return {
                    zombie: [
                        {
                            name: '路障僵尸',
                            hp: 280,
                            maxHp: 280,
                            atk: 20,
                            interval: 300,
                            speed: 4000,
                            id: 2,
                            loss: 40,
                            tombstoneLevel: 1,
                            dangerLevel: 2,
                            img: 'luz',
                            num: 2,
                            index: 1,
                            buff: []
                        },
                        {
                            name: '路障僵尸',
                            hp: 280,
                            maxHp: 280,
                            atk: 20,
                            interval: 300,
                            speed: 4000,
                            id: 2,
                            loss: 40,
                            tombstoneLevel: 1,
                            dangerLevel: 2,
                            img: 'luz',
                            num: 2,
                            index: 1,
                            buff: []
                        },
                        {
                            name: '普通僵尸',
                            hp: 100,
                            maxHp: 100,
                            atk: 20,
                            interval: 300,
                            speed: 4000,
                            id: 1,
                            loss: 20,
                            tombstoneLevel: 1,
                            dangerLevel: 1,
                            img: 'puj',
                            num: 1,
                            index: 7,
                            buff: []
                        },
                        {
                            name: '读报僵尸',
                            hp: 170,
                            maxHp: 170,
                            atk: 20,
                            interval: 300,
                            speed: 4000,
                            skill: {
                                id: 'fn',
                                isUsed: false,
                                name: '愤怒',
                                description: '当前血量低于130时，移动速度翻倍'
                            },
                            id: 5,
                            loss: 20,
                            tombstoneLevel: 1,
                            dangerLevel: 2,
                            img: 'dub',
                            num: 2
                        },
                        {
                            name: '读报僵尸',
                            hp: 170,
                            maxHp: 170,
                            atk: 20,
                            interval: 300,
                            speed: 4000,
                            skill: {
                                id: 'fn',
                                isUsed: false,
                                name: '愤怒',
                                description: '当前血量低于130时，移动速度翻倍'
                            },
                            id: 5,
                            loss: 20,
                            tombstoneLevel: 1,
                            dangerLevel: 2,
                            img: 'dub',
                            num: 2
                        }
                    ],
                    list: [
                        {
                            id: 2,
                            name: '豌豆射手',
                            price: 100,
                            type: 3,
                            atk: 10,
                            atkActionText: '发射了一颗豌豆，击中了',
                            atkRange: 'line',
                            interval: 1000,
                            maxHp: 100,
                            hp: 100,
                            img: 'pea',
                            url: 'https://pic.imgdb.cn/item/667985b3d9c307b7e9ac5908.png',
                            isCanPlant: true,
                            location: 2,
                            x: 1,
                            y: 1,
                            atkInterval: 0,
                            battleId: '豌豆射手（#0）'
                        },
                        {
                            id: 2,
                            name: '豌豆射手',
                            price: 100,
                            type: 3,
                            atk: 10,
                            atkActionText: '发射了一颗豌豆，击中了',
                            atkRange: 'line',
                            interval: 1000,
                            maxHp: 100,
                            hp: 100,
                            img: 'pea',
                            url: 'https://pic.imgdb.cn/item/6673a07ad9c307b7e910e909.gif',
                            isCanPlant: true,
                            location: 2,
                            x: 1,
                            y: 2,
                            atkInterval: 0,
                            battleId: '豌豆射手（#1）'
                        },
                        {
                            id: 8,
                            name: '双发射手',
                            price: 200,
                            type: 3,
                            atk: 20,
                            atkActionText: '发射了两颗豌豆，击中了',
                            atkRange: 'line',
                            interval: 1000,
                            maxHp: 100,
                            hp: 100,
                            img: 'doublePea',
                            url: 'https://pic.imgdb.cn/item/6673a04ad9c307b7e9109b0e.gif',
                            isCanPlant: true,
                            location: 2,
                            x: 1,
                            y: 3,
                            atkInterval: 0,
                            battleId: '双发射手（#2）'
                        }
                    ],
                    plant: [],
                }
            },
            methods: {
                init() {
                    let plant = []
                    for (let index = 1; index < 10; index++) {
                        let item = {
                            x: index,
                            list: []
                        }
                        this.list.map(i => {
                            if (i.x == index) item.list.push(i)
                        })
                        plant.push(item)
                    }
                    this.plant = plant
                }
            },
            mounted() {
                this.init()
            }
        })
    }
</script>

<head>
    <style>
        @font-face {
            font-family: AlibabaPuHuiTi-2-55-Regular;
            src: url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-2/AlibabaPuHuiTi-2-55-Regular/AlibabaPuHuiTi-2-55-Regular.woff2) format('woff2');
        }

        html {
            font-family: 'AlibabaPuHuiTi-2-55-Regular', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
        }

        body {
            width: max-content;
            height: max-content;
        }

        .container {
            background-image: url(https://pic.imgdb.cn/item/6672b9d1d9c307b7e9a49847.jpg);
            background-size: 100% 100%;
            width: 700px;
            height: 250px;
            position: relative;
        }


        .plantList {
            position: absolute;
            width: 365px;
            left: 126px;
            top: 32px;
            display: flex;
            align-items: center;
        }

        .line {
            width: calc(100% / 9);
            height: 205px;
        }

        .item {
            width: 100%;
            height: 20%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .plant {
            width: 80%;
            object-fit: cover;
            display: block;
            z-index: 99;
        }

        .shadow {
            width: 100%;
            object-fit: cover;
            display: block;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            z-index: 2;
        }

        .zombieList {
            position: absolute;
            right: 80px;
            top: 32px;
            width: 120px;
            height: 205px;
        }

        .zombie {
            max-height: 60px;
            object-fit: cover;
            display: block;
            position: absolute;
        }

        .bigZombie {
            max-height: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="plantList">
            <template v-for="(x, index) in plant">
                <div class="line">
                    <div class="item" v-for="(y, index1) in x.list" :key="index1">
                        <img class="plant" :src="y.url">
                        <img class="shadow" src="https://pic.imgdb.cn/item/667986d2d9c307b7e9aff183.png">
                    </div>
                </div>
            </template>
        </div>
        <!-- <div class="zombieList">
            ${renderBattleConfirmZombieHTML(zombie)}
        </div> -->
    </div>
</body>

</html>